import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class BlurPage extends StatefulWidget {
  const BlurPage({super.key});

  @override
  State<BlurPage> createState() => _BlurPageState();
}

class _BlurPageState extends State<BlurPage> {
  double _sigma = 4.0;

  @override
  Widget build(BuildContext context) {
    const imgUrl =
        'https://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'; // 可替换成你的图片或使用 assets
    return Scaffold(
      appBar: AppBar(title: const Text('Gaussian Blur Demo')),
      body: SafeArea(
        child: Column(
          children: [
            const SizedBox(height: 8),
            Text(
              '模糊强度: ${_sigma.toStringAsFixed(1)}',
              style: const TextStyle(fontSize: 16),
            ),
            Slider(
              min: 0,
              max: 20,
              divisions: 100,
              value: _sigma,
              onChanged: (v) => setState(() => _sigma = v),
            ),

            /*
             * 图片模糊展示区域
             * 使用ImageFiltered实现对网络图片的高斯模糊效果
             * 通过_sigma参数控制模糊程度
             *
             * 方法1：ImageFiltered — 对单张图片进行模糊（效果清晰、易控）
             * 使用ImageFiltered widget对单一图片应用高斯模糊效果
             * 这种方法只模糊图片本身，不影响其他界面元素
             *
             */
            Padding(
              padding: const EdgeInsets.all(12.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 显示当前实现方法的标题
                  const Text(
                    '方法1 — ImageFiltered（仅模糊图片）',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 8),
                  // 应用圆角裁剪并添加图像模糊效果
                  ClipRRect(
                    borderRadius: BorderRadius.circular(12),
                    child: ImageFiltered(
                      // 使用ui.ImageFilter.blur创建高斯模糊滤镜
                      // sigmaX和sigmaY控制模糊半径，值越大越模糊
                      imageFilter: ui.ImageFilter.blur(
                        sigmaX: _sigma,
                        sigmaY: _sigma,
                      ),
                      child: Image.network(
                        imgUrl,
                        width: double.infinity,
                        height: 200,
                        fit: BoxFit.cover,
                        // 自定义图片加载进度指示器
                        loadingBuilder: (context, child, progress) {
                          /*
                           * 图片加载构建器
                           * 参数说明:
                           * context: 构建上下文
                           * child: 原始图片组件
                           * progress: 加载进度信息
                           * 返回值: 根据加载状态返回不同的组件
                           */
                          if (progress == null) return child;
                          return SizedBox(
                            height: 180,
                            child: Center(
                              child: CircularProgressIndicator(
                                value: progress.expectedTotalBytes != null
                                    ? progress.cumulativeBytesLoaded /
                                          progress.expectedTotalBytes!
                                    : null,
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                ],
              ),
            ),

            // 方法2：BackdropFilter — 在叠层上模糊“背景/下面的内容”
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '方法2 — BackdropFilter（模糊叠加下方内容）',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 8),
                    Expanded(
                      child: Stack(
                        children: [
                          // 背景图片（无模糊）
                          Positioned.fill(
                            child: Image.network(imgUrl, fit: BoxFit.cover),
                          ),

                          // 半透明容器 + BackdropFilter 模糊其后面的背景
                          Center(
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(16),
                              child: Container(
                                width: MediaQuery.of(context).size.width * 0.85,
                                // 图片宽度
                                height: 160,
                                // 图片高度
                                // Stack: BackdropFilter 必须在有實體繪製的widget上（如Container）才会生效 //
                                child: BackdropFilter(
                                  filter: ui.ImageFilter.blur(
                                    sigmaX: _sigma,
                                    sigmaY: _sigma,
                                  ),
                                  child: Container(
                                    alignment: Alignment.center,
                                    color: Colors.black.withOpacity(0.25),
                                    // 半透明以显示“毛玻璃”感
                                    child: const Text(
                                      'BackdropFilter 毛玻璃效果',
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 18,
                                        fontWeight: FontWeight.w600,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
